<template>
  <div class="demo4">
    <div class="leftWrap">
      <div v-for="(item,index) in issucessList"
           class="leftItem" :class="{
              'active':chooseIndex===index
           }"
           @click="select(index)"

      >
        {{index+1}}.{{item.title}}
      </div>
    </div>

    <div class="rightWrap" v-html="bodyString"></div>
  </div>

</template>

<script>
  import axios from 'axios'


  export default {
    name: 'demo4',
    components: {},
    props: {},
    data() {
      return {
        issucessList: [], // 列表数据
        chooseIndex: 2,
        bodyString: ''


      };
    },
    mounted() {

      axios.get('https://api.github.com/repos/eyasliu/blog/issues').then(res => {
        console.log(res.data)
        this.issucessList = res.data

        this.setBody(res.data[this.chooseIndex].body)
      })
    },
    methods: {
      select(index) {
        this.chooseIndex = index
        this.setBody(this.issucessList[index].body)
      },
      getHtml(md) {
        return axios.post('https://api.github.com/markdown', {
          "text": md,
          "mode": "gfm",
          "context": "github/gollum"
        })
      },
      setBody(md) {
        this.getHtml(md).then(res => {
          this.bodyString = res.data;
        })
      }
    },
    computed: {}
  };
</script>

<style scoped lang="less">
  .demo4 {
    display: flex;

    .leftWrap {
      width: 200px;
      padding: 10px;
      flex: none;


      .leftItem {
        cursor: pointer;
        padding: 5px 0;

        &.active {
          color: blue;
        }
      }
    }

    .rightWrap {
      flex: 1;
      min-height: 300px;
      border: 1px solid #ccc;
      padding: 20px;
    }
  }
</style>
<style lang="less">
  .demo4 {

  }
</style>
